<template>
<div class="view">
	<div class="page-statistics">
		<div class="poetyList">
			诗词景点游览
		</div>
		<div class="list">
			<div class="list-item" v-for="(item,index) in poetryList" :key="'index'+index">
				<div class="order">{{index +1}}</div>
				<div class="score">
					<span class="name" :class="{'newIcon':item.classUserNoCheck >=1}">{{item.scenicName | filterEllipsis}}</span> 
				</div>	
				<div :class="['num',{'goClock':item.userUse == '-1','unClock':item.userUse == '2','clocking':item.userUse == '0','hasClock':item.userUse == '1'}]" @click="jumpNext(item)"> </div>
			</div>
		</div>
	</div>
</div>

</template>

<script>
import * as api from '@/api/index';
export default {
	data(){
		return {
			userInfo: JSON.parse(localStorage.getItem("userInfo")),
			poetryList:[]
		
		}
	},
	mounted(){
			this.getList()
	},
	filters:{
		filterEllipsis(val){
			if(val&&val.length>6) return val.substring(0,6)+"..."
			return val
		}
	},
	methods: {
		/**
		 * UserUse  
			-1 未打卡 
			0已经上传，未审核 
			1已经上传，已经审核
			2已经上传，审核未通过
		 */
		jumpNext(item){
			this.$router.push({
				path: '/scence/submitPic',
				query:{
					userUse:item.userUse,
					scenicId :item.scenicId,
					scenicUserId :item.userScenicId
				}
			})
		},
		//排序
		// sortData(a, b) {
    //         return  a.scenicScore  -b.scenicScore
    //     },
		//获取个人诗词打卡列表
		async getList(){
			let data ={
				userId:this.userInfo.userId,
				futureId:this.userInfo.futureId
			}
			var res=await api.getListViewByUser(data)
			if(res.resultCode==1){
				// const arr =res.value.sort(this.sortData)
				this.poetryList = res.value
			}

		},
	},
}
</script>

<style lang="scss" scoped>
.page-statistics{
	padding:.3rem .4rem 2rem;
	>div{
		position: relative;
		z-index: 2;
	}
}
.poetyList{
	padding: .2rem 0;
	font-size: .44rem;
	color: #333333;
}
.list{
	flex: 1;
	overflow: scroll;
	.list-item{
		display: flex;
		height: 1rem;
		align-items: center;
		justify-content: space-around;
		line-height: 1rem;
		text-align: center;
		font-size: .36rem;
		color: #333333;
		padding-left: .2rem;
		.order{
			color: #05b3b6;
			font-size: .32rem;
			width: .66rem;
			text-align: center;
		}
		.score{
			text-align: left;
			padding-left: .3rem;	
			flex: 1;
			overflow: hidden;
			.name{
				padding-right: 1rem;
				position: relative;
			}
			.newIcon::after{
				content: '';
				position: absolute; right: 0; top: 0;
				background: url(~@/assets/img/tour/new.png) no-repeat 0 center;
				background-size: 100%;
				width: .8rem; height: 100%;
			}
		}
		.num{
			border:1px solid #05b3b6;
			background-color: #05b3b6;
			color: #ffffff;
			font-size: .3rem;
			border-radius: .3rem;
			width: 1.5rem;
			height: .6rem;
			line-height: .58rem;
		}
		.num.goClock::after{
			content: '去打卡';
		}
		.num.unClock{
			border:1px solid #f66759;
			background-color: #f66759;
			&::after{
				content: '未通过';
			}
		}
		.num.clocking::after{
			content: '审核中';
		}
		.num.hasClock{
			background: #fff;
			color: #05b3b6;
			&::after{
				content: '已打卡';
			}
		}

	}
}
</style>